<template>
	<view>
	
		<view class="recharge_boxs">
			<view class="boxs">
				<view class="text_box">
					<text class="tit">可提现金额</text>	
				</view>
				<text class="money">￥{{userInfo.u_balance == undefined?'0.00':userInfo.u_balance}}</text>
			</view>
			
			<view class="text_boxs">
				<view class="text_boxs_money">
					<text class="tit">已提现金额</text>
					<text style="margin-bottom: 10rpx;">¥ {{withDrawEdMoney}}</text>
				</view>
				<!-- <view class="commission_box"  @click="commission_nav()">
					<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/ce627589460517da47ce0043f3f44284e84fa080.png" mode=""></image>
					<text class="tit">提现明细</text>	
				</view> -->
			</view>
		</view>
		
		
		<!-- 充值金额 -->
		<view class="recharge_box">
			<view class="text_box">
				<text class="tit">提现金额</text>
				<view class="all_rechange" @click="all_btn()">
					全部提现
				</view>
				<!-- <view class="commission_box"  @click="commission_nav()">
					<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/f0172a3274a0fc89209d2ad5856896e33cc7af27.png" mode=""></image>
					<text class="tit">佣金明细</text>
				</view> -->
			</view>
			<view class="input_box">
				<text class="money_unit">￥</text>
				<input type="text" placeholder="请输入提现金额" placeholder-style="font-size: 28rpx; color:#999" v-model="money" @input="input_value">
			</view>
			
			
			<view class="yue_recharge">
				<text class="yue">提现手续费：{{ cursh_detail.service_money == undefined?'0.00': cursh_detail.service_money}}元</text>
				<view class="all_rechange">
					实际到账：{{cursh_detail.final_money == undefined?'0.00':cursh_detail.final_money}}元
				</view>
			</view>
		</view>
		
		<!-- 提现说明 -->
		<view class="illustrate">
			<text>温馨提示</text> 
			<!-- <text> 1、单笔提现金额需大于2元</text>
			<text>2、提现申请后预计将在三个工作日内将款项发放至您提供的
			支付宝账号中</text> -->
			
			<text> 1. 请填写个人正确的{{setting_account_name}}账号和实名认证信息，否则会打款失败；</text>
			<text> 2. 提现时间：每周一中午12：00——6：00为提现时间；</text>
			<text> 3. 平台在审核信息通过后，将于T+1工作日周期内将提现信息打款到指定账户，谢谢配合！</text>
			<!-- <pre>{{withdraw_explain}}</pre> -->
		</view>
		
		
		<!-- 可提现类型 -->
		<view class="pay_type">
			<text class="tit">提现方式</text>
			<view class="pay_types_box">
				<view class="pay_types">
					<!-- <image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/06af28c0041bff9e1af9d0c073b9d2c45c8c9c25.png" mode=""></image> -->
					<text>提现至{{setting_account_name}}</text>
				</view>
				
				<view class="radio-content">
				  <view class="radio-content">
					  <view class="radio" :class="radio_ali == 1 ? 'radio-default':''" >
						<view :class="radio_ali == 1 ? 'radio-active':'radio-active-add'"></view>
					  </view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<!-- 支付按钮 -->
		<view class="pay_btn">
			<view class="btn" @click="getcursh()">
				申请提现
			</view>
		</view>
		
		<!-- 提现记录 -->
		<view class="exchange_money">
			<view class="exchange_title">
				提现记录
			</view>
			<view class="exchange_record_list" v-for="(item,index) in cursh_list" :key="index">
				<view class="top">
					<text class="top_tit">提现</text>
					<text class="top_money">-￥{{item.money}}</text>
				</view>
				<view class="bot">
					<text class="bot_time">{{item.addtime}}</text>
					<text class="bot_status">{{item.status}}-支付宝</text>
				</view>
			</view>
			
			<view class="no_box" v-if="cursh_list.length == 0">
				<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/cc7c51ec37da95bab43ef9e42c7ff2dbff71c451.png" mode=""></image>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				radio_ali: 1,
				cursh_detail: '',
				minWithmoney: '',
				userInfo:{},
				money: '',
				num: 0,
				withDrawEdMoney: 0.00,
				withdraw_explain: '',
				cursh_list:[],
				cursh_status: 0,
				setting_account_name: ''
			};
		},
		onLoad() {
			
			
		},
		onShow() {
			this.getUserInfo()
			this.getMoneyDetail()
			this.get_shoxu()
		},
		methods:{
			get_shoxu(){
				let that = this
				app.globalRequest({
					api: app.getApi().user.getApplyService,
					method: 'get',
					data:{
						price: that.money == ''? 0:0
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					}
					if (res.code == 0) {
						that.cursh_detail = res.data
					}
				}).catch(err => {
				
				})
			},
			all_btn(){
				let that = this
				that.money = that.userInfo.u_balance
				app.globalRequest({
					api: app.getApi().user.getApplyService,
					method: 'get',
					data:{
						price: that.money
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					}
					if (res.code == 0) {
						that.cursh_detail = res.data
					}
				}).catch(err => {
				
				})
			},
			commission_nav(){
				uni.navigateTo({
					url: '/pages/user/withdrawal_record/withdrawal_record'
				})
			},
			
			getMoneyDetail(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.commssionLists,
					data:{
						type: 2,
						is_balance: 1
					}
				}).then(res => {
					if (res.code == 1) {
						that.cursh_list = res.data
					}
				}).catch(err => {
				
				})
			},
			
			
			// 获取可提现的钱数的数据
			getUserInfo(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					if (res.code == 1) {
						that.setting_account_name = res.data.setting_account_name
						that.userInfo = res.data.uInfo;
						that.minWithmoney = res.data.minWithmoney
						that.withDrawEdMoney = res.data.withDrawBalanceMoney
						that.withdraw_explain = res.data.withdraw_explain
					}
				}).catch(err => {
				
				})
			},
			
			input_value(e){
				
				let that = this

				that.money = e.detail.value
				app.globalRequest({
					api: app.getApi().user.getApplyService,
					method: 'get',
					data:{
						price: that.money
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					}
					if (res.code == 0) {
						that.cursh_detail = res.data
					}
				}).catch(err => {
				
				})
			},
			
			//提现
			getcursh(e) {
				let that = this;
				if( that.money == '' ){
					uni.showToast({
						title: '提现金额不可为空',
						icon:'none'
					})
					return
				}
				if( that.money <  0 ){
					uni.showToast({
						title: '提现金额必须大于0',
						icon:'none'
					})
					return
				}
				app.globalRequest({
					api: app.getApi().user.getYuEcursh,
					method: 'post',
					data:{
						price: that.money
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
						
						
						
					}
					
					if (res.code == 0) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
						that.money = ''
						that.cursh_status = 0
						that.get_shoxu()
						that.getMoneyDetail()
						that.getUserInfo()
					}
					
		
				}).catch(err => {
				
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7!important;
		padding-bottom: 50rpx;
	}
	pre {
	    white-space: pre-wrap;
		margin-top: 20rpx;
	    /*word-wrap: break-word;*/
	}
	.recharge_box{
		width: 90%;
		margin: 30rpx auto 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		box-sizing: border-box;
		.text_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tit{
				color: #333333;
				font-size: 28rpx;
			}
			.commission_box{
				display: flex;
				align-items: center;
			
				image{
					width: 30rpx;
					height: 30rpx;
				}
				text{
					font-size: 22rpx;
					color: #3B8DFF;
					margin-left: 10rpx;
				}
			}
		}
		.input_box{
			display: flex;
			align-items: center;
			margin: 50rpx 0 0;
			.money_unit{
				color: #111111;
				font-size: 36rpx;
			}
		}
		input{
			height: 100rpx;
			
			// padding: 30rpx 0;
			// box-sizing: border-box;
			text-align: center;
			font-size: 36rpx;
			border-bottom: 2rpx solid #EEEEEE;
			width: 100%;
		}
		.yue_recharge{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.yue{
				margin-top: 32rpx;
				font-size: 24rpx;
				color: #666666;
			}
			.all_rechange{
				color: #EC1818;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
		}
		
	}
	

	.pay_btn{
		width: 100%;
		margin-top: 40rpx;
		padding-top: 10rpx;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		.btn{
			margin: 0 auto ;
			background: linear-gradient(82deg, #FEE035 0%, #FFE035 100%);
			width: 90%;
			color: #111111;
			text-align: center;
			font-size: 32rpx;
			height: 84rpx;
			line-height: 84rpx;
		}
	}
	.recharge_boxs{
		width: 90%;
		margin: 30rpx auto 0;
		height: 156rpx;
		background: url('https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/79e9436b49cb3e1aa1c0587f68da64b41d52fb8e.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		position: relative;
		.boxs{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.text_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tit{
				color: #111111;
				font-size: 24rpx;
			}
		
		}
		.money{
			color: #111;
			font-size: 56rpx;
			font-weight: bold;
			margin-top: 10rpx;
			margin-left: -10rpx;
		}

		.text_boxs{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text_boxs_money{
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				
				text{
					color: #111111;
					font-size: 24rpx;
				}
				.tit{
					color: #111111;
					font-size: 24rpx;
					margin-bottom: 40rpx;
				}
			}
			
			.commission_box{
				display: flex;
				align-items: center;
				position: absolute;
				top: 30rpx;
				right: 0;
				padding: 4rpx 30rpx;
				box-sizing: border-box;
				background-color: #F8C10B;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #111111;
				}
			}
		}
		
	}
	
	.pay_type{
		width: 90%;
		margin: 40rpx auto 0;
		display: flex;
		flex-direction: column;
		.tit{
			color: #111111;
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}
		.pay_types_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.pay_types{
				display: flex;
				align-items: center;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				text{
					color: #111111;
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	
	.radio-content {
	  display: flex;
	  align-items: center;
	  .col{
	  	color: #B38E65;
	  }
	}
	.radio {
	  padding: 4rpx;
	  box-sizing: border-box;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 15rpx;
	}
	.radio-active{
	  width: 9px; 
	  height: 9px;
	  border-radius: 50%;
	  background-color: #F05E5E;
	}
	
	.radio-active-add{
	  width: 9px; 
	  height: 9px;
	  border-radius: 50%;
	  background-color: #fff;
	}
	
	
	.radio-default{
	  border: 2rpx solid #F05E5E;
	}
	
	.illustrate{
		width: 90%;
		margin:20rpx auto 0;
		color: #111111;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		text{
			margin-top: 10rpx;
		}
	}
	
	.exchange_money{
		width: 90%;
		margin: 0rpx auto 0;
		background-color: #fff;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		.exchange_title{
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			border-bottom: 2rpx solid #F7F7F7;
		}
		
		.exchange_record_list{
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			margin-top: 22rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				font-size: 28rpx;
				.top_money{
					font-size: 30rpx;
				}
			}
			.bot{
				margin-top: 5rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #666666;
				font-size: 24rpx;
			}
		}
	}
	
	.no_box{
		width: 320rpx;
		height: 260rpx;
		margin: 200rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
